<template>
  <div class="login-container">
    <van-nav-bar
      class="page-nav-bar"
      :title="isLogin ? '登录' : '注册'"
      @click-left="$router.back()"
    >
      <van-icon slot="left" name="cross" />
    </van-nav-bar>
    <van-form @submit="onSubmit" ref="userFormRef">
      <van-field
        v-model="userinfo.user_name"
        name="user_name"
        placeholder="用户名"
        :rules="userFormRules.user_name"
        type="text"
        maxlength="10"
      >
      </van-field>
      <van-field
        v-model="userinfo.password"
        name="password"
        placeholder="密码6~15位"
        :rules="userFormRules.password"
        type="password"
        minlength="6"
        maxlength="15"
      >
      </van-field>
      <div class="login-btn-wrap">
        <van-button class="login-btn" block type="info" native-type="submit">{{
          isLogin ? '登录' : '注册'
        }}</van-button>
        <van-button
          class="register-btn"
          block
          type="info"
          native-type="button"
          @click="isLogin = !isLogin"
        >
          {{ isLogin ? '没有账号，免费注册' : '跳转登录' }}
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { login, register } from '@/api/user'
export default {
  name: 'LoginIndex',
  data() {
    return {
      isLogin: true,
      userinfo: {
        user_name: 'admin',
        password: 'a123456'
      },
      userFormRules: {
        user_name: [
          {
            required: true,
            message: '用户名不能为空'
          }
        ],
        password: [
          {
            required: true,
            message: '密码不能为空'
          }
        ]
      },
      countDownShow: false
    }
  },
  created() {},
  mounted() {},
  methods: {
    onSubmit() {
      if (this.isLogin) {
        this.loginFn()
      } else {
        this.registerFn()
      }
    },
    // 登录
    async loginFn() {
      this.$toast.loading({
        message: '登录中...',
        forbidClick: true,
        duration: 0
      })
      const { data: res } = await login(this.userinfo)
      if (res.meta.status === 200) {
        this.$toast.success('登录成功')
        this.$store.commit('setUserToken', res.data.token)
        this.$router.back()
      } else {
        this.$toast.fail(res.meta.msg)
      }
    },
    // 登录
    async registerFn() {
      this.$toast.loading({
        message: '注册中...',
        forbidClick: true,
        duration: 0
      })
      const { data: res } = await register(this.userinfo)
      if (res.meta.status === 200) {
        this.$toast.success('注册成功')
        this.isLogin = true
      } else {
        this.$toast.fail(res.meta.msg)
      }
    }
  }
}
</script>

<style scoped lang="less">
.login-container {
  .toutiao {
    font-size: 37px;
  }
  .send-sms-btn {
    width: 162px;
    height: 46px;
    line-height: 46px;
    background-color: #ededed;
    font-size: 22px;
    color: #666;
  }
  .login-btn-wrap {
    padding: 53px 33px;
    .login-btn {
      background-color: #6db4fb;
      border: none;
      margin-bottom: 40px;
    }
    .register-btn {
      background-color: #fff;
      color: black;
      border: 1px solid #666;
    }
  }
}
</style>
